<template>
    <z-paging @pageScroll="pageScroll" ref="paging" v-model="flwList" @query="queryList" :refresher-enabled="false">
        <view class="header_box">
            <view class="biaoti_box">
                <view class="left_icon_box" @click="back">
                    <image src="https://www.dingxians.cn/upload/20250324/67e13c80ecef6.png" mode="scaleToFill" />
                </view>
                <view class="center_biaoti_box">
                    中奖记录
                </view>
                <view class="left_icon_box">
                    <!-- 占位 -->
                </view>
            </view>
        </view>
            <view class="record_box" v-for="(item, index) in flwList"
                style="background-image: url('https://www.dingxians.cn/upload/20250513/6822f58a190ff.png');">
                <view class="left_box">
                    <view class="top_name_avatar_box">
                        <view class="touxiang_boxs">
                            <image :src="item.avarat" mode="scaleToFill" />
                        </view>
                        <view class="name_box"><text style="color: rgba(73, 203, 219, 1);">{{item.nickname}}</text>
                        </view>
                    </view>
                    <view class="shijian_box">{{ item.kj_at }}</view>
                </view>
                <view class="right_box">
                    <view class="l_box">{{item.title}}</view>
                    <view class="r_imgh_box">
                        <image :src="item.image" mode="scaleToFill" />
                    </view>
                </view>
            </view>
    </z-paging>
</template>

<script>
import api from '../../api/index.js'
export default {
    components: {},
    data() {
        return {
            luckyId: '',//id
            flwList: [],//福利屋list
        };
    },
    onLoad(e) {
        this.luckyId = e.id
    },
    methods: {
        
        back(){
uni.navigateBack({ delta: 1 })
        },
        // 监听滚动高度
        pageScroll(event) {
            uni.$emit("onPageScroll", event.detail.scrollTop)
        },
        queryList(pageNo, pageSize) {
            let data = {
                page: pageNo,
                limit: pageSize,
                id: this.luckyId
            }
                api.users.luckDrawsDraw_zj_all(data).then(res => {
                if (res.code == 200) {
                    this.$refs.paging.complete(res.data.data)
                }
            })


        },
    },
};
</script>

<style lang="scss" scoped>

::v-deep.zp-scroll-view-absolute {
    background-image: none !important;
    background-color: #000 !important;
}

.header_box {
    width: 750rpx;
    height: 180rpx;
    box-sizing: border-box;
    padding-top: 92rpx;

    .biaoti_box {
        width: 100%;
        height: 88rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20rpx;

        .left_icon_box {
            width: 80rpx;
            height: 80rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .center_biaoti_box {
            width: 380rpx;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 40rpx;
            color: #fff;
            font-weight: 900;
        }
    }
}
.record_box {
    width: 690rpx;
    height: 100rpx;
    background-size: 100% 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 16rpx;
    padding-top: 14rpx;
    margin-bottom: 20rpx;

    .left_box {
        width: 55%;
        height: 100%;

        .top_name_avatar_box {
            height: 39rpx;
            display: flex;
            justify-content: flex-start;
            margin-bottom: 10rpx;

            .touxiang_boxs {
                height: 39rpx;
                width: 39rpx;
                border-radius: 50%;
                background-color: #fff;
                margin-right: 12rpx;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .name_box {
                width: 300rpx;
                height: 39rpx;
                line-height: 39rpx;
                font-family: Source Han Serif CN;
                font-weight: bold;
                font-size: 20rpx;
                color: #FFFFFF;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

            }
        }

        .shijian_box {
            height: 15rpx;
            line-height: 15rpx;
            font-family: Source Han Serif CN;
            font-weight: 400;
            font-size: 20rpx;
            color: #999999;
        }
    }

    .right_box {
        width: 45%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .l_box {
            width: 200rpx;
            height: 100rpx;
            line-height: 100rpx;
            font-family: Source Han Serif CN;
            font-weight: 400;
            font-size: 20rpx;
            color: #ffffff;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
        }

        .r_imgh_box {
            width: 69rpx;
            height: 80rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }

}
</style>